# Component: Carousel

Visual slideshow for media archives and hero content

Interactive Block

![[Pasted image 20260426081902.png]]

### BEM Anatomy

| Type      | Class Name        | Description                                                                                      |
| --------- | ----------------- | ------------------------------------------------------------------------------------------------ |
| ==Block== | `.as-carousel`    | Main wrapper. Handles `border-radius` and hides overflow.                                        |
| Modifier  | `--article-menu`  | Contextual modifier for article menu.                                                            |
| Modifier  | `--media-archive` | Contextual modifier for media archive.                                                           |
| Modifier  | `--media-program` | Contextual modifier for media program.                                                           |
| Modifier  | `--small`         | Compact mode with smaller controls, reduced font sizes, and tighter caption padding.             |
| Element   | `__item`          |                                                                                                  |
| Element   | `__image`         | The slide background. Uses `background-size: cover` for responsive cropping.                     |
| Element   | `__link`          | Applied to interactive slides; sets the cursor to `alias`.                                       |
| Element   | `__caption`       | Semi-transparent dark overlay for text. Hidden on mobile, visible on `md`+.                      |
| Element   | `__title`         | The primary headline for the slide. Handles white-space wrapping and line-clamp for long titles. |
| Element   | `__date-time`     | Flex container for the scheduling information (Date and Time range).                             |
| Element   | `__date`          | Displays the specific calendar date (e.g., "Oct 24").                                            |
| Element   | `__time-from`     | The starting timestamp for a program.                                                            |
| Element   | `__time-dash`     | A decorative or functional separator (usually a "—") between start and end times.                |
| Element   | `__time-to`       | The ending timestamp for a program.                                                              |

### Custom Control Overrides

The component overrides Bootstrap's default `.carousel-control` styles to match the application's design system:

##### Generated HTML

```html
<div class="as-carousel as-carousel--media-archive carousel slide">
    <div class="carousel-inner">
        <div class="as-carousel__item carousel-item active">
            <div class="as-carousel__image as-carousel__link" 
                 style="background-image: url('...');">
                <div class="as-carousel__caption carousel-caption">
                    <h5 class="as-carousel__title">Slide Title</h5>
                </div>
            </div>
        </div>
    </div>
    <!-- Custom Styled Controls -->
    <button class="carousel-control-prev">...</button>
</div>
```

##### SCSS

```scss
.as-carousel {
  // Navigation Icons
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-size: 75%;
    border: 2px solid var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .75);
    border-radius: 50rem; // Pill shape
  }

  // Caption Visibility
  &__caption {
    display: none;
    @include media-breakpoint-up(md) {
      display: block;
    }
  }
}
```

